<template>
  <section class="container" id="app">
      <List></List>
        <h2 class="text-center">学生信息表</h2>
        <!-- 表单 -->
        <form class="form-horizontal">
            <div class="form-group">
                <label for="inputName" class="col-sm-3 col-sm-offset-1 control-label">学生姓名:</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" v-model="inputName" placeholder="学生姓名">
                </div>
            </div>
            <!-- form-group充当的就是row -->
            <div class="form-group">
                <label for="inputPhone" class="col-sm-3 col-sm-offset-1 control-label">联系方式:</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" v-model="inputPhone" placeholder="联系方式">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-12 text-center">
                    <button type="button" class="btn btn-success" @click="addData" v-show="showOrHide">
                        <span class="glyphicon glyphicon-plus"></span>&nbsp;添加信息
                    </button>
                    <button type="button" class="btn btn-warning" @click="confirmEdit" v-show="!showOrHide" style="display:none">
                        <span class="glyphicon glyphicon-ok"></span>&nbsp;确认编辑
                    </button>
                </div>
            </div>
        </form>
        <!-- 表格 -->
        <table class="table" v-show="stus.length">
            <thead>
                <tr>
                    <th class="text-center col-sm-3">学号</th>
                    <th class="text-center col-sm-3">学生姓名</th>
                    <th class="text-center col-sm-3">联系方式</th>
                    <th class="text-center col-sm-3">操作</th>
                </tr>
            </thead>
            <tbody id="showData" v-cloak>
                <tr class="text-center" v-for="(item,index) in stus" :key="index" :class="{'bg-danger':!item.isFinished}">
                    <th class="text-center">{{item.id}}</th>
                    <td>{{item.name}}</td>
                    <td>{{item.phone}}</td>
                    <td>
                        <button type="button" class="btn btn-default btn-sm btn-edit" @click="editData(index)">
                            <span class="glyphicon glyphicon-edit"></span>&nbsp;编辑</button>&nbsp;
                        <button type="button" class="btn btn-default btn-sm btn-del" data-toggle="modal" data-target=".bs-example-modal-sm" @click="findIndex(index)">
                            <span class="glyphicon glyphicon-remove-sign"></span>&nbsp;删除
                        </button>
                        <span class="glyphicon btn-circle" @click="isOk(index)" :class="{'glyphicon-ok':!item.isFinished}"></span>
                    </td>
                </tr>
                <tr class="text-center">
                    <td>总人数为{{lenNum}}</td>
                    <td>未及格人数{{noFinished}}</td>
                    <td>及格人数{{finished}}</td>
                    <td class="text-center">
                        <button type="button" class="btn btn-danger btn-trash" data-toggle="modal" data-target=".bs-example-modal-sm" @click="clearBtn">
                            <span class="glyphicon glyphicon-trash"></span>&nbsp;清空</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="alert alert-warning text-center" role="alert" id="warning" style="display:none" v-show="!stus.length">暂无数据......</div>
        <!-- 模态框 -->
        <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title text-danger">{{tips}}</h4>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary btn-danger" data-dismiss="modal" @click="removeData">确定</button>
                    </div>
                </div>
            </div>
        </div>

    </section>
</template>

<script>
import List from '@/components/demoList'
export default {
  name:'stuInfo',
  components:{
      List
  },
  data(){
      return{
        stus:[{
                id: 'ID1505043900575',
                name: '小黑',
                phone: 1232222,
                isFinished:true
            }
        ],
        inputName:'',
        inputPhone:'',
        index:0,
        showOrHide:true,
        tips:''
      }
  },
        computed:{
            lenNum:function(){
                return this.stus.length;
            },
            finished:function(){
                var count=0;
                for(var i=0;i<this.stus.length;i++){
                    if(this.stus[i].isFinished){
                        count++;
                    }
                }
                return count;
            },
            noFinished:function(){
                return this.lenNum-this.finished;
            }
        },
        methods:{
            addData:function(){
                var dt={
                    id:'ID'+new Date().getTime(),
                    name:this.inputName,
                    phone:this.inputPhone,
                    isFinished:true
                }
                this.stus.push(dt);
                this.inputName=this.inputPhone='';
            },
            findIndex:function(i){
                this.index=i;
                this.tips='\u60a8\u786e\u5b9a\u8981\u5220\u9664\u5417\uff1f\uff1f\uff1f';
                this.showOrHide=true;
                this.inputName=this.inputPhone='';
            },
            removeData:function(){
                if(this.index===-2){
                    this.stus=[];
                }else{
                    this.stus.splice(this.index,1);
                }
            },
            editData:function(i){
                this.index=i;
                this.inputName=this.stus[i].name;
                this.inputPhone=this.stus[i].phone;
                this.showOrHide=false; 
            },
            confirmEdit:function(){
                this.stus[this.index].name=this.inputName;
                this.stus[this.index].phone=this.inputPhone;
                this.showOrHide=true;
                this.inputName=this.inputPhone='';
            },
            clearBtn:function(){
                this.index=-2;
                //在windows、windows service 默认以GBK的编码方式跟你保存
                //linux、unix、windows service 服务端的系统
                this.tips='\u60a8\u786e\u5b9a\u8981\u6e05\u7a7a\u5417\uff1f\uff1f\uff1f';
                this.showOrHide=true;
                this.inputName=this.inputPhone='';
            },

            isOk:function(i){
                this.stus[i].isFinished=!this.stus[i].isFinished
            }
        }
  
}
</script>

<style lang="less" scoped>
    // @import '../../node_modules/bootstrap/dist/css/bootstrap.css';
    [v-cloak] {
            display: none
        }

        .btn-circle {
            border-radius: 3px;
            border: 1px solid #c0c0c0;
            cursor: pointer;
            display: inline-block;
            width: 16px;
            height: 16px;
        }
</style>


